import React from 'react'
import './cal.css'
import { NavBar, Icon, Tabs, SegmentedControl, Card, List, InputItem, Button } from 'antd-mobile'
import ReactEcharts from 'echarts-for-react'

const tabs = [
  { title: '公积金贷款' },
  { title: '商业贷款' },
  { title: '组合贷款' }
];
const formData = [
  {
    title: '贷款方式',
    content: [
      { key: 1, text: '按房价总额', value: 1 },
      { key: 2, text: '按贷款总额', value: 2 }
    ]
  },
  {
    title: '贷款年限',
    content: [
      { key: 1, text: '10', value: 1 },
      { key: 2, text: '20', value: 2 },
      { key: 3, text: '30', value: 3 }
    ]
  },
  {
    title: '贷款利率',
    content: [
      { key: 1, text: '3.25%', value: 1 },
      { key: 2, text: '9.5折', value: 2 },
      { key: 3, text: '9折', value: 3 }
    ]
  },
]

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      totalPrice: ''
    }
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  onChange = (e) => {
    console.log(`selectedIndex:${e.nativeEvent.selectedSegmentIndex}`);
  }
  cal1 = () => {
    console.log('计算方式1');
  }
  cal2 = () => {
    console.log('计算方式2');
  }
  onValueChange = (value) => {
    // console.log(value);
    switch (value) {
      case '按房价总额':
        this.cal1()
        break
      case '按贷款总额':
        this.cal2()
        break
      case '10':
        break
      case '20':
        break
      case '30':
        break
      case '3.25%':
        break
      case '9.5折':
        break
      case '9折':
        break
    }
  }
  inputValueChange = val => {
    this.setState({
      totalPrice: val
    })
  }
  render() {
    const segTemplate = formData.map((item, i) => {
      const valueList = item.content.map(item2 => {
        return item2.text
      })

      return (
        <Card.Header
          key={i}
          title={item.title}
          extra={
            <SegmentedControl
              values={valueList}
              onChange={this.onChange}
              onValueChange={this.onValueChange} />
          }
        />
      )
    })
    const inputItem = (
      <List key='inputItem'>
        <InputItem
          value={this.state.totalPrice}
          onChange={this.inputValueChange}
          placeholder="0.00"
          extra="¥"
        >贷款总额</InputItem>
      </List>
    )
    segTemplate.splice(1, 0, inputItem)
    return (
      <div>
        <Card className='card'>{segTemplate}</Card>
      </div>
    )
  }
}

class MyEcharts extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [
        { value: 335, name: '贷款金额' },
        { value: 310, name: '利息' }
      ]
    }
  }
  componentDidMount() {
    this.getOption()
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  cal = () => {
    let data = [...this.state.data]
    data[0].value = 1000
    this.setState(
      {
        data
      }, () => {
        let echarts_instance = this.echarts_react.getEchartsInstance()
        // console.log(echarts_instance);
        echarts_instance.setOption(this.getOption())
      })
  }
  getOption = () => {
    let option = {}
    option = {
      title: {
        text: '计算结果',
        subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['贷款金额', '利息']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: this.state.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    return option
  }
  render() {
    return (
      <div>
        <Button className='button' onClick={this.cal}>计算</Button>
        <ReactEcharts
          ref={(e) => { this.echarts_react = e; }}
          option={this.getOption()} />
      </div>
    )
  }
}

class Cal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  backToMain = () => {
    const { history } = this.props
    history.goBack()
  }
  render() {
    return (
      <div>
        {/* 导航 */}
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={this.backToMain}
        >
          <span>贷款利率计算</span>
        </NavBar>
        {/* tab切换 */}
        <Tabs tabs={tabs}
          initialPage={0}
          onChange={(tab, index) => { console.log('onChange', index, tab); }}
          onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
        >
          {/* tab切换内容 1.表单 2.图标 */}
          <div>
            <Form />
            <MyEcharts />
          </div>
          <div>
            <h2>2</h2>
          </div>
          <div>
            <h2>3</h2>
          </div>
        </Tabs>
      </div>
    )
  }
}
export default Cal
